<template>
	<view>
		<scroll-view class="uni-slidingMenu" scroll-x :style="{background: color}">
			<view  :class="['slidingMenuList',activeIndex==index?'active':'']" v-for="(item, index) in list" :key="index" @click="getActive(index)" v-cloak>{{ item }}</view>
		</scroll-view>
		
		<view class="resscro"  @click="select()" v-for="(item,index) in dataList" :key="item.serialNumber">	
			 <view class="items" >
					  <view  class="title">
						 编号
					  </view>
						<view class="value">
							{{item.serialNumber}}
						</view>
			</view>
			 <view class="items">
					 <view  class="title">
						检疫时间
						</view>
						<view class="value">
							{{item.quarantineTime}}
					</view>
			</view>	
			<view class="items">
					 <view  class="title">
						申报人名称
						</view>
						<view class="value">
							{{item.filerName}}
					</view>
			</view>	
			<view class="items">
					 <view  class="title">
						电话
						</view>
						<view class="value">
							{{item.phoneNumber}}
					</view>
			</view>	
			<view class="items">
					 <view  class="title" style="margin-bottom:30px">
						养殖户名称
						</view>
						<view class="value" style="margin-bottom:30px">
							{{item.breedingFarmName}}
					</view>
			</view>	
		  
		</view>
		
	
	<view class="pulsicon">
		<uniIcon class="uniIcon" size="40" color="white" type="plusempty" @click="save"></uniIcon>
	</view>
	
	</view>
</template>

<script>
	import uniIcon from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'
	
export default {
	components:{uniIcon},
	data() {
		return {
			color:{
				type:String,
				default:'#777777',
			},
			 list: ['动物产地工作记录', '乳用、种用动物工作记录单', '种蛋、胚胎、静夜检疫工作记录单'],
			activeIndex:"0",
			dataList:[
				{
				serialNumber:'苏(320921)11802111551998',
				quarantineTime:'2019-09-01',
				filerName:'某某某',
				phoneNumber:'18277830992',
				breedingFarmName:'苏州第一猪场'
			},
			{
				serialNumber:'苏(320921)11802111551999',
				quarantineTime:'2019-09-01',
				filerName:'某某某',
				phoneNumber:'18277830992',
				breedingFarmName:'苏州第一猪场'
			},
			{
				serialNumber:'苏(320921)11802111551910',
				quarantineTime:'2019-09-01',
				filerName:'某某某',
				phoneNumber:'18277830992',
				breedingFarmName:'苏州第一猪场'
			},
				{
					serialNumber:'苏(320921)11802111551911',
					quarantineTime:'2019-09-01',
					filerName:'某某某',
					phoneNumber:'18277830992',
					breedingFarmName:'苏州第一猪场'
				},
			]
		};
	},
	methods:{
		getActive(index){
			this.activeIndex=index;
			this.selectindex=index
			
		},
		select(){
			console.log("dianji")
		},
		save(){
			if(this.activeIndex==0){
				//增加动物产地工作记录
				uni.navigateTo({
				    url: '/pages/work/addAnimalsQua'
				});
			}else if(this.activeIndex==1){
				//增加乳用、种用动物工作记录单
			}else{
				//种蛋、胚胎、静夜检疫工作记录单
			}
			
		}
		
	},
	
};
</script>

<style>
	page{
		
		background-color: #fafafa;
	}
/* 滑动菜单栏的总内容区域 */
.uni-slidingMenu {
	width: 100%;
	white-space: nowrap;
	height: 100rpx;
	background-color: #FFFFFF;
}
/* 循环显示的菜单栏 */
.slidingMenuList {
	height: 100rpx;
	line-height: 100rpx;
	display: inline-block;
	font-size: 30rpx;
	font-weight: 900;
	margin-left: 60rpx;
}
.slidingMenuList:last-child{
	margin-right: 60rpx;
}
/* 点击选中菜单栏时的样式 */
.active {
	color: red;
	font-size: 30rpx;
	border-bottom: 2rpx solid red;
	box-sizing: border-box;
	font-weight: 900;
}
.items{

	font-size:20px;
	font-weight:900;
}
.items .title{
	margin-top:3%;
	width:50%;
	float:left;
	margin-left:5%;
	
	
	
}
.items .value{
	margin-top:3%;
	float:right;
	margin-right:5%;
}
	 .pulsicon {
		height: 100upx;
		width: 100upx;
		position: fixed;
		top:88%;
		margin-left: 630upx;
		background-color: #007AFF;
		border-radius: 50%;
		
	}
	 .pulsicon .uniIcon{
		display: block;
		text-align: center;
		line-height: 100upx;
	}

</style>
